<template>
  <el-dialog
    title="打印"
    width="1344px"
    :visible.sync="dialogVisible"
    class="view-dialog-container"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="$emit('close')">
    <div class="content-box">
      <div class="content-box-show">
        <div v-for="item in selectedList" :key="item.id">
          <el-descriptions
            title="交易日期：2020年07月01日"
            extra="回单编号：20200710300100001136"
            colon
            direction="horizontal"
            :column="2"
            :labelStyle="labelStyle"
            :contentStyle="contentStyle"
            :border="true">
            <el-descriptions-item label="账号" :span="2">
              {{ item.accountNo || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="户名" :span="2">
              {{ item.accountName || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="开户银行" :span="2">
              {{ item.openBankName || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="交易金额" :span="2">
              {{ item.transAmt || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="回单种类">
              {{ item.receiptType || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="交易渠道">
              {{ item.transChannel || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="业务种类">
              {{ item.businessType || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="交易流水">
              {{ item.transSerial || '--' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <img
                  :src="sealImg"
                  alt=""
                  style="width: 112px; height: 112px" />
              </template>
              <div style="margin-bottom: 12px">
                付款人账号：{{ item.payAccountNo || '--' }}
              </div>
              <div style="margin-bottom: 12px">
                付款人名称：{{ item.payAccountName || '--' }}
              </div>
              <div>付款人开户行：{{ item.payOpenBankName || '--' }}</div>
            </el-descriptions-item>
          </el-descriptions>
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-top: 5px;
            ">
            <div>
              打印方式：
              <span>网银</span>
            </div>
            <div>
              打印时间：
              <span>2025-09-12 08:54:23</span>
            </div>
            <div>
              本次打印次数：
              <span>{{ item.id }}</span>
            </div>
            <div>请勿重复记账</div>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-top: 5px;
            ">
            <div>
              交易网点：
              <span>海曙支行营业部</span>
            </div>
            <div>
              操作员：
              <span>测试</span>
            </div>
          </div>
          <div style="border-top: 1px dashed #ddd; margin: 20px 0"></div>
        </div>
      </div>
      <div id="content-box-print">
        <div v-for="item in selectedList" :key="item.id">
          <div :style="{ width: realPrintWidth }">
            <el-descriptions
              title="交易日期：2020年07月01日"
              extra="回单编号：20200710300100001136"
              colon
              direction="horizontal"
              :column="2"
              :labelStyle="labelStyle"
              :contentStyle="contentStyle"
              :border="true">
              <el-descriptions-item label="账号" :span="2">
                {{ item.accountNo || '--' }}
              </el-descriptions-item>
              <el-descriptions-item label="户名" :span="2">
                {{ item.accountName || '--' }}
              </el-descriptions-item>
              <el-descriptions-item label="开户银行" :span="2">
                {{ item.openBankName || '--' }}
              </el-descriptions-item>
              <el-descriptions-item label="交易金额" :span="2">
                {{ item.transAmt || '--' }}
              </el-descriptions-item>
              <el-descriptions-item label="回单种类">
                {{ item.receiptType || '--' }}
              </el-descriptions-item>
              <el-descriptions-item label="交易渠道">
                {{ item.transChannel || '--' }}
              </el-descriptions-item>
              <el-descriptions-item label="业务种类">
                {{ item.businessType || '--' }}
              </el-descriptions-item>
              <el-descriptions-item label="交易流水">
                {{ item.transSerial || '--' }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <img
                    :src="sealImg"
                    alt=""
                    style="width: 112px; height: 112px" />
                </template>
                <div style="margin-bottom: 12px">
                  付款人账号：{{ item.payAccountNo || '--' }}
                </div>
                <div style="margin-bottom: 12px">
                  付款人名称：{{ item.payAccountName || '--' }}
                </div>
                <div>付款人开户行：{{ item.payOpenBankName || '--' }}</div>
              </el-descriptions-item>
            </el-descriptions>
            <div
              style="
                display: flex;
                justify-content: space-between;
                margin-top: 5px;
              ">
              <div>
                打印方式：
                <span>网银</span>
              </div>
              <div>
                打印时间：
                <span>2025-09-12 08:54:23</span>
              </div>
              <div>
                本次打印次数：
                <span>{{ item.id }}</span>
              </div>
              <div>请勿重复记账</div>
            </div>
            <div
              style="
                display: flex;
                justify-content: space-between;
                margin-top: 5px;
              ">
              <div>
                交易网点：
                <span>海曙支行营业部</span>
              </div>
              <div>
                操作员：
                <span>测试</span>
              </div>
            </div>
            <div style="border-top: 1px dashed #ddd; margin: 20px 0;"></div>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer-box">
      <div class="set-box">
        <el-form v-model="setForm" inline>
          <el-form-item label="是否打印装订区">
            <el-radio-group v-model="setForm.bindArea">
              <el-radio label="15mm">是</el-radio>
              <el-radio label="10mm">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="纸张尺寸">
            <el-select v-model="setForm.paperSize">
              <el-option
                v-for="item in paperSizeOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="每页打印张数">
            <el-select v-model="setForm.pageSize">
              <el-option
                v-for="item in pageSizeOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向">
            <el-select v-model="setForm.direction">
              <el-option
                v-for="item in directionOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn-box">
        <el-button @click="downloadFn">下载</el-button>
        <el-button type="primary" v-print="printConfig">打印</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import print from 'vue-print-nb';
export default {
  directives: {
    print
  },
  props: {
    selectedList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    let that = this;
    return {
      dialogVisible: false,
      sealImg: require('./seal.jpg'),
      printConfig: {
        id: 'content-box-print',
        popTitle: '',
        extraCss: '',
        extraHead: `<style>
          @page {
            size: A4 portrait;
            margin: 0 15mm 0 15mm !important;
          }
        </style>`,
        beforeOpenCallback: that.beforeOpenCallback
      },
      setForm: {
        bindArea: '15mm',
        paperSize: 'A4',
        pageSize: 3,
        maxPageSize: 3,
        direction: 'portrait'
      },
      directionOptions: [
        {
          label: '纵向',
          value: 'portrait'
        },
        {
          label: '横向',
          value: 'landscape'
        }
      ],
      paperSizeOptions: [
        {
          label: 'A4',
          value: 'A4'
        },
        {
          label: 'A5',
          value: 'A5'
        }
      ],
      pageSizeOptions: [
        {
          label: '1',
          value: 1
        },
        {
          label: '2',
          value: 2
        },
        {
          label: '3',
          value: 3
        }
      ],
      labelStyle: {
        fontSize: '16px',
        lineHeight: '16px',
        textAlign: 'left',
        width: '210px',
        padding: '12px 16px'
      },
      contentStyle: {
        fontSize: '16px',
        lineHeight: '16px',
        textAlign: 'left',
        width: '551px',
        padding: '12px 16px'
      }
    };
  },
  computed: {
    // 打印区域实际宽度
    realPrintWidth() {
      let val = '210mm';
      let { paperSize, direction } = this.setForm;
      if (paperSize === 'A5') {
        // A5时只有横向
        val = '210mm';
      } else {
        if (direction === 'portrait') {
          val = '210mm'; // A4纵向打印210mm
        } else {
          val = '297mm'; // A4横向打印297mm
        }
      }
      return val;
    }
  },
  watch: {
    setForm: {
      handler(val) {
        let { pageSize, paperSize } = val;
        if (paperSize === 'A5') {
          this.directionOptions = [
            {
              label: '横向',
              value: 'landscape'
            }
          ];
          this.pageSizeOptions = [
            {
              label: '1',
              value: 1
            }
          ];
          val.direction = 'landscape';
          val.pageSize = 1;
        } else {
          this.pageSizeOptions = [
            {
              label: '1',
              value: 1
            },
            {
              label: '2',
              value: 2
            },
            {
              label: '3',
              value: 3
            }
          ];
          if (pageSize > 1) {
            this.directionOptions = [
              {
                label: '纵向',
                value: 'portrait'
              }
            ];
            val.direction = 'portrait';
          } else {
            this.directionOptions = [
              {
                label: '纵向',
                value: 'portrait'
              },
              {
                label: '横向',
                value: 'landscape'
              }
            ];
          }
        }
        this.printConfig.extraHead = this.getPrintConfig();
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.dialogVisible = true;
  },
  methods: {
    downloadFn() {
      this.$message.success('下载成功');
    },
    beforeOpenCallback() {
      console.log(
        '打印样式==>',
        this.printConfig.extraHead,
        this.realPrintWidth
      );
    },
    getPrintConfig() {
      let { bindArea, direction, paperSize } = this.setForm;
      return `<style>
        @page {
          size: ${paperSize} ${direction};
          margin: 0 ${bindArea} 0 ${bindArea} !important;
        }
      </style>`;
    }
  }
};
</script>

<style lang="scss" scoped>
.view-dialog-container {
  ::v-deep .el-dialog {
    .el-dialog__header {
      border-bottom: 1px solid #ddd;
    }
    .el-dialog__body {
      min-height: 300px;
      max-height: 430px;
      overflow-y: auto;
    }
    .el-dialog__footer {
      padding: 0 20px;
      border-top: 1px solid #ddd;
    }
  }
  .dialog-footer-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    .set-box {
      margin-top: 20px;
    }
  }
  .content-box {
    #content-box-print {
      position: absolute;
      top: 0;
      left: -9999999px;
      font-size: 14px;
      box-sizing: border-box;
    }
  }
}
</style>
